<template>
<div style="background:#f5f7fa;min-height:100vh;padding:24px;">
            <el-card shadow="never" style="margin-bottom: 24px;">
                    <el-form :model="form" ladel-width="110px" :inline="false">
                        <template #header>
                            <span>基础信息</span>
                        </template>
                        <el-row :gutter="100">
                            <el-col :span="10">
                                <el-form-item label="仓库名称"  :label-width="formLabelWidth" >
                                    <el-input v-model="form.warename" autocomplete="off" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item label="仓库容量"  :label-width="formLabelWidth">
                                    <el-input v-model="form.capacity" autocomplete="off" />
                                </el-form-item>
                            </el-col>
                        </el-row>  
                        <el-row :gutter="100">
                            <el-col :span="10">
                                <el-form-item label="库管部门" :label-width="formLabelWidth">
                                    <el-select v-model="form.wdepartment" placeholder="请选择">
                                        <el-option label="部门一" value="部门一" />
                                        <el-option label="部门二" value="部门二" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item label="仓库主管" :label-width="formLabelWidth">
                                    <el-select v-model="form.wsupervisor" placeholder="请选择">
                                        <el-option label="张三" value="张三" />
                                        <el-option label="李四" value="李四" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="100">
                            <el-col :span="10">
                                <el-form-item label="联系电话"  :label-width="formLabelWidth">
                                    <el-input v-model="form.wphone" autocomplete="off" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item label="数量"  :label-width="formLabelWidth">
                                    <el-input v-model="form.wsorting" autocomplete="off" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        
                        <el-form-item label="仓库地址"  :label-width="formLabelWidth">
                            <el-input v-model="form.waddress" autocomplete="off" />
                        </el-form-item>
                        <el-row :gutter="100">
                            <el-col :span="10">
                                <el-form-item label="最大容量"  :label-width="formLabelWidth">
                                    <el-input v-model="form.wsortingmax" autocomplete="off" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
          
            </el-card>
             <el-card shadow="never">
                <template #header>
                    <span>库位信息</span>
                </template>
                <div style="margin-bottom: 12px;">
                    <el-button plain @click="dialogFormVisible = true">
                       新增
                    </el-button>
                    <el-button>删除</el-button>
                    <el-button>导入</el-button>
                    <el-button>导出</el-button>
                </div>
                <el-table :data="tableData" border style="width: 100%;">
                    <el-table-column type="selection" width="40" />
                    <el-table-column prop="locationNo" label="库位编号" width="120" />
                    <el-table-column prop="locationName" label="库位名称" width="120" />
                    <el-table-column prop="lcapacity" label="库位容量/m³" width="120" />
                    <el-table-column prop="lprincipal" label="库位主管" width="120" />
                    <el-table-column prop="lsort" label="排序" width="80" />
                    <el-table-column prop="lstatus" label="库位状态" width="100" >
                         <template #default="{row}">
                            {{ row.lstatus === 1 ? '启用' : '停用' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" width="120" />
                    <el-table-column label="操作" width="120">
                <template #default="scope">
                    <el-button type="text" size="small" @click="onEdit(scope.row)">编辑</el-button>
                    <el-button type="text" size="small" @click="onDelete(scope.row)">删除</el-button>
                </template>
                </el-table-column>
                </el-table>

                <el-dialog v-model="dialogFormVisible" title="库位信息" width="500">
                        <el-row :gutter="200">
                            <el-col :span="20">
                                <el-form-item label="仓库Id" :label-width="formLabelWidth">
                                    <el-input v-model="form1.warehouseid" autocomplete="off" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="20">
                                <el-form-item label="库位编号" :label-width="formLabelWidth">
                                    <el-input v-model="form1.locationNo" autocomplete="off" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="20">
                                <el-form-item label="库位名称" :label-width="formLabelWidth">
                                    <el-input v-model="form1.locationName" autocomplete="off" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="20">
                                <el-form-item label="库位容量/m³" :label-width="formLabelWidth">
                                    <el-input v-model="form1.lcapacity" autocomplete="off" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="20">
                                <el-form-item label="库位主管" :label-width="formLabelWidth">
                                    <el-select v-model="form1.lprincipal" placeholder="请选择库位主管">
                                        <el-option label="张三" value="张三" />
                                        <el-option label="李四" value="李四" />
                                        <el-option label="王五" value="王五" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="20">
                                <el-form-item label="排序" :label-width="formLabelWidth">
                                    <el-input v-model="form1.lsort" autocomplete="off" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="20">
                                <el-form-item label="库位状态" :label-width="formLabelWidth">
                                        <el-radio-group v-model="form1.lstatus" >
                                            <el-radio :label="1">启用</el-radio>
                                            <el-radio :label="0">停用</el-radio>
                                        </el-radio-group>
                                </el-form-item>
                            </el-col>
                             <el-col :span="20">
                                <el-form-item label="备注" :label-width="formLabelWidth">
                                    <el-input v-model="form1.remark" autocomplete="off" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    
                    
                    
                    <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="addWarehouse()">
                       保存
                        </el-button>
                    </div>
                    </template>
                </el-dialog>

             </el-card>
        </div>
        <div style="margin-bottom: 20px;">
            <el-button type="primary" @click="onSubmit">提交</el-button>
        </div>
</template>
<script lang="ts" setup>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { ajaxUpload } from 'element-plus/es/components/upload/src/ajax.mjs';
import { onMounted, ref } from 'vue';
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessageBox } from 'element-plus';
import service from '@/utils/request';

const router = useRouter();
const dialogFormVisible = ref(false)

const form1 = reactive({
  warehouseid:'',
  locationNo: '',
  locationName: '',
  lcapacity: '',
  lprincipal: '',
  lstatus: '',
  lsort: '',
  remark: '',
  
})

const formLabelWidth = '140px'

const form = reactive({
  warename: '',
  capacity: '',
  wdepartment: '',
  wsupervisor: '',
  wphone: '',
  waddress: '',
  wsorting: '',
  wsortingmax: '',
})

const tableData = ref([])

onMounted(() => {
    GetDatas();
})

const GetDatas = () => {
    axios.get("http://59.110.150.130:8089/api/app/location/location")
    .then(res => {
        if (res.data) {
            tableData.value = res.data;
        }
    })
    .catch(error => {
        console.error('Error fetching data:', error);
    })
}

const addWarehouse=()=>{
    axios.post("http://59.110.150.130:8089/api/app/location/location",form1)
    .then(res=>{
        if(res.data.code==200)
        {
            ElMessage.success("添加成功")
            dialogFormVisible.value=false;
            GetDatas();
        }
        // else
        // {
        //     ElMessage.error('添加失败')
        // }
    })
    .catch(err=>{
        console.log(err)
    })
}


const onSubmit = () => {
    
}


function onLication() {
    // 跳转到新增仓库页面
  router.push({ path: '/AddWarehouse' });
}


function onEdit(row: any) {
    
}

function onDelete(row: any) {
     ElMessageBox.confirm(
    '你确定要删除吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      service.delete('/api/app/location/'+row.locationNo+'/location')
      .then(res => {
        if (res.data.code == 200) {
          ElMessage.success('删除成功');
          GetDatas();
        } else {
          ElMessage.error('删除失败');
        }
      })

    .catch(err => {
        ElMessage.error('删除失败');
        console.log(err);
    });
  })
  .catch(() => {
    ElMessage({
      type: 'info',
      message: '删除被取消',
    })
  })
  debugger
}

// 导出库位信息
function exportWarehouse() {
  service({
    url: '/api/app/location/export-warehouse', // 修正为后端实际可用的接口
    method: 'post',
    responseType: 'blob'
  }).then(res => {
    const url = window.URL.createObjectURL(new Blob([res.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'warehouse.xlsx');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  });
    axios.delete("http://59.110.150.130:8089/api/app/location/id/location")
    .then(res=>{
        ElMessageBox.confirm('确定删除吗？', '提示', {
            
        })
        if(res.data.code==200){
            ElMessage.success("删除成功")
            GetDatas();
        }
        // else
        // {
        //     ElMessage.error('删除失败')
        // }
    })
    .catch(err=>{
        console.log(err)
        
    })
}

</script>

